<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <!-- 是页面自适应大小 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>弹球游戏</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 父组件设为相对位置 子组件设为绝对位置 可以实现 子组件相对于父组件的绝对布局 */
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: rgb(158, 190, 228);
        }

        .ball {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0px;
            top: 0px;
            background-color: rgb(14, 51, 101);
            border-radius: 30px;
        }

        .board {
            position: absolute;
            left: 0;
            bottom: 10px;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: rgb(12, 26, 41);
            border-color: rgb(24, 36, 170);
        }
    </style>
</head>

<body>
    <div id="myapp">
        <!-- 游戏区域 -->
        <div class="container">
            <!-- 底部挡板 -->
            <div v-if="!fail" class="board" :style="{left: board_x+'px'}"></div>
            <!-- 球 -->
            <div v-if="!fail" class="ball" :style="{left: ball_x+'px', top: ball_y+'px'}"></div>
            <h1 v-if="fail" style="text-align:center; color: rgb(23, 25, 73);">游戏失败</h1>
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    ball_x: 0,
                    ball_y: 0,
                    board_x: 0,
                    board_y: 0,
                    fail: false,
                    // 移动速度
                    speed_x: 0.1,
                    speed_y: 0.1,
                    board_step: 20,
                }
            },
            // 组件生命周期函数,组件加载时会调用
            mounted() {
                //键盘事件
                this.enterKeydown();
                //随机弹球的运动速度方向
                this.speed_x = (Math.random() + 0.1);
                this.speed_y = (Math.random() + 0.1);
                //计数器 控制弹球移动
                this.timer = setInterval(() => {
                    //反弹改变速度
                    let change_speed = false;
                    //反弹判定
                    if (this.ball_x + this.speed_x >= 400 - 30) {
                        this.speed_x *= -1;
                        change_speed = true;
                    }
                    if (this.ball_x + this.speed_x <= 0) {
                        this.speed_x *= -1;
                        change_speed = true;
                    }
                    if (this.ball_y + this.speed_y <= 0) {
                        this.speed_y *= -1;
                        change_speed = true;
                    }
                    //被接住
                    if (this.ball_y >= 440 - 30 - 10 - 10 && this.board_x <= this.ball_x + 30 && this.board_x + 80 >= this.ball_x) {
                        this.speed_y *= -1;
                        change_speed = true;
                    }
                    this.ball_x += this.speed_x;
                    this.ball_y += this.speed_y;
                    // if (change_speed)
                    //     this.change_speed();
                    //失败判定
                    if (this.ball_y >= 440 - 30 - 10) {
                        clearInterval(this.timer);
                        this.fail = true;
                    }
                }, 2)
            },
            methods: {
                //键盘移动
                keydown(event) {
                    if (event.key == "ArrowLeft" || event.key == "End") {
                        if (this.board_x > this.board_step) {
                            this.board_x -= this.board_step;
                        }
                    }
                    else if (event.key == "ArrowRight" || event.key == "Home") {
                        if (this.board_x < 440 - 70 - this.board_step)
                            this.board_x += this.board_step;
                    }
                    this.board_step = (Math.abs(this.speed_x) + (Math.abs(this.speed_y)) / 1.0) * 10
                },
                change_speed() {
                    this.speed_x += Math.random() * (this.speed_x / Math.abs(this.speed_x));
                    this.speed_y += Math.random() * (this.speed_y / Math.abs(this.speed_y));
                },
                enterKeydown() {
                    document.addEventListener("keydown", this.keydown);
                }
            }
        }
        let instance = Vue.createApp(app).mount("#myapp");
    </script>
</body>